<template>
    <div class="bg">

        <div class="partOne">
            <myScroll style="width: auto;height: 1100px">
            <Tree :data="tree" :render="renderContent">    //mkRevise
                <Spin size="large" fix v-if="spinShow"></Spin>
            </Tree>
            </myScroll>
        </div>

        <div class="partTwo">
            <Card style="width:100%;margin-bottom: 30px;">
                <Form :model="fatherObj" label-position="left" :label-width="120" style="font-size: 14px;">
                    <FormItem label="父级Title">
                        <Input v-model="fatherObj.path" placeholder="父级Title" disabled></Input>
                    </FormItem>
                    <FormItem label="父级Title">
                        <Input v-model="fatherObj.title" placeholder="父级Title" disabled></Input>
                    </FormItem>
                </Form>
            </Card>

            <Card :bordered="false">
                <p slot="title">{{fatherObj.id? '新增': (menuObj.id? '编辑': '无操作')}}</p>
                <Form :model="menuObj" label-position="left" :label-width="120" style="font-size: 14px;">
                    <FormItem label="title">
                        <Input v-model="menuObj.title" placeholder="菜单名称"></Input>
                    </FormItem>
                    <FormItem label="url">
                        <Input v-model="menuObj.url" placeholder="菜单路由url"></Input>
                    </FormItem>
                    <FormItem label="icon">
                        <Input v-model="menuObj.icon" placeholder="菜单图标名"></Input>
                    </FormItem>
                    <FormItem label="sort">
                        <InputNumber :max="20" :min="1" v-model="menuObj.sort"></InputNumber>
                    </FormItem>
                </Form>

                <Row :gutter="20" type="flex" justify="end">
                    <Col span="6">
                        <Button type="primary" shape="circle" icon="md-checkmark-circle-outline" long
                                style="font-size: 15px;"
                                @click="save">
                            保存
                        </Button>
                    </Col>
                    <Col span="6">
                        <Button type="primary" @click="empty" shape="circle" icon="ios-close-circle-outline" long
                                style="font-size: 15px;">清空
                        </Button>
                    </Col>
                </Row>
            </Card>
        </div>
    </div>
</template>

<script>
    import MyScroll from "../common/MyScroll";
    export default {
        name: 'Menu',
      components: {MyScroll},
      data() {
            return {
                spinShow: false,
                tree: [],
                menuObj: {
                    url: '',
                    title: '',
                    icon: '',
                    sort: 1
                },
                fatherObj: {}
            }
        },
        mounted: function () {
            this.loadMenuTree()
        },
        methods: {
            loadMenuTree: function () {
                this.spinShow = true
                window.myapi.do_post('$menu/tree', {}).then(resp => {
                    if (resp.status === 200 && resp.data.status === 200) {
                        this.tree = resp.data.data
                    } else {
                        this.$Notice.warning({
                            title: '提示',
                            desc: resp.data.msg
                        })
                    }
                }).finally(() => {
                    this.spinShow = false
                })
            },
            del: function (arr) {
                window.myapi.do_del('$menu/del', arr).then(resp => {
                    if (resp.status === 200 && resp.data.status === 200) {
                        this.loadMenuTree()
                        this.$Notice.success({
                            title: '提示',
                            desc: resp.data.msg
                        })
                    } else {
                        this.$Notice.warning({
                            title: '提示',
                            desc: resp
                        })
                    }
                }).finally(() => {
                })
            },
            empty: function () {
                this.menuObj = {}
                this.fatherObj = {}
            },
            save: function () {
                if (!this.fatherObj.id && !this.menuObj.id) {
                    this.$Message.info('无法提交，请先选择对应的级别数据')
                    return
                }
                let url = this.menuObj.id ? '$menu/upd' : '$menu/save'
                let method = this.menuObj.id ? 'PUT' : 'POST'
                if (this.fatherObj.id) {
                    this.menuObj.pid = this.fatherObj.id
                }
                window.myapi.put_post(url, this.menuObj, method).then(resp => {
                    if (resp.status === 200 && resp.data.status === 200) {
                        this.loadMenuTree()
                        this.$Notice.success({
                            title: '提示',
                            desc: resp.data.msg
                        })
                        this.makeFormDefault()
                    } else {
                        this.$Notice.error({
                            title: '提示',
                            desc: resp
                        })
                    }
                }).finally(() => {
                })
            },
            makeFormDefault () {
                this.menuObj = {
                    url: '',
                    title: '',
                    icon: '',
                    sort: 1
                }
            },
            renderContent(h, {root, node, data}) {
                return h('span', {
                    style: {
                        display: 'inline-block',
                        width: '100%'
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: 'ios-paper-outline'
                            },
                            style: {
                                marginRight: '8px',
                                fontSize: '14px',
                                lineHeight: '20px'
                            }
                        }),
                        h('span', {
                            style: {
                                marginRight: '8px',
                                fontSize: '14px',
                                lineHeight: '20px',
                                cursor: 'pointer'
                            },
                            on: {
                                click: (event) => {
                                    // 获取查询的级联导航
                                    // self.getNaviText(data)
                                    // 选中样式
                                    let oneNode = document.querySelector('.ivu-tree-title-selected')
                                    if (oneNode) {
                                        oneNode.classList.remove('ivu-tree-title-selected')
                                    }
                                    event.target.classList.add('ivu-tree-title-selected')
                                }
                            }
                        }, data.title)
                    ]),
                    h('span', {
                        style: {
                            display: 'inline-block',
                            float: 'right',
                            marginRight: '32px'
                        }
                    }, [
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'md-add'
                            }),
                            style: {
                                marginRight: '4px',
                                height: '20px',
                                padding: '0px 15px'
                            },
                            on: {
                                click: () => {
                                    this.fatherObj = JSON.parse(JSON.stringify(data))
                                    this.menuObj = {}
                                }
                            }
                        }),
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-create-outline'
                            }),
                            style: {
                                marginRight: '4px',
                                height: '20px',
                                padding: '0px 15px'
                            },
                            on: {
                                click: () => {
                                    this.fatherObj = {}
                                    this.menuObj = JSON.parse(JSON.stringify(data))
                                }
                            }
                        }),
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'md-remove'
                            }),
                            style: {
                                marginRight: '4px',
                                height: '20px',
                                padding: '0px 15px'
                            },
                            on: {
                                click: () => {
                                    this.$Modal.confirm({
                                        title: '删除确认',
                                        content: '<p>确认要删除该改单以及其所有子孙菜单吗？</p>',
                                        onOk: () => {
                                            this.del([data.id])
                                        },
                                        onCancel: () => {
                                        }
                                    })
                                    // this.remove(root, node, data)
                                }
                            }
                        })
                    ])
                ])
            }
        }
    }
</script>

<style scoped>
    .bg {
        width: 100%;
        min-height: 950px;
         padding: 5px;
        display: flex;
        background: white;
        border-radius: 3px;
    }

    .partOne {
        flex: 2;
        padding: 0px 10px;
        background: #fff;
        border-radius: 3px;
    }

    .partTwo {
        flex: 3;
        padding: 0px 40px;
        background: #fff;
        border-radius: 3px;
    }

    .cardSon {
        width: 100%;
        height: 100%;
    }
</style>
